@import "~scss/variables";

$content-max-width: 960px;

.sw-dashboard-index {
    &__welcome-text {
        max-width: $content-max-width;
        margin: 0 auto;
    }

    &__welcome-title {
        width: 100%;
        margin-top: 40px;
        margin-bottom: 2px;

        @media (min-width: 1024px) {
            width: 70%;
        }
    }

    &__welcome-message {
        color: $color-darkgray-200;
        font-size: $font-size-xs;
        line-height: 25px;
        letter-spacing: 0.32px;

        @media (min-width: 1024px) {
            width: 33%;
        }
    }

    &__intro {
        display: flex;
        padding: 30px;
    }

    &__intro-content {
        min-width: 400px;

        h1 {
            font-size: ($font-size-s * 2);
            margin-bottom: 20px;
        }
    }

    &__title {
        font-weight: $font-weight-semi-bold;
    }

    &__help-text {
        margin-left: 8px;
    }

    &__card-grid {
        max-width: $content-max-width;
        margin: 32px auto;

        @media (min-width: 1024px) {
            display: grid;
            grid-template-columns: 3fr 2fr;
            grid-column-gap: 24px;
            grid-row-gap: 0;
        }
    }

    &__card {
        background-color: #fff;
        border: 1px solid $color-gray-300;
        border-radius: $border-radius-lg;
        box-shadow: 0 4px 9px 0 rgba(120, 138, 155, 5%);
        padding: 21px 27px;
        margin-bottom: 32px;
        height: 200px;
        max-height: 200px;
        overflow-y: auto;

        &--dimmed {
            border: 1px solid $color-gray-300;
            background-color: $color-gray-50;
            text-align: center;
        }

        &--bg-checklist {
            @media screen and (min-width: 375px) {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 125'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h169.413793v123.940887H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M166.725113 36.6521092c7.924078 15.9629093-.827009 41.0899821-13.952139 58.8695104-13.07813 17.7535254-30.484303 28.1329564-47.545773 29.1807324-17.07177 1.084924-33.7619361-7.149789-49.8627962-19.975816-16.1479606-12.8001328-31.7066154-30.1919073-33.2233305-49.7903489-1.5167151-19.5984416 11.0086095-41.4035502 27.8837774-49.710919C66.94702-3.10821315 88.1932313 2.00589638 111.16206 7.93615696c22.958728 5.96850054 47.602973 12.74102464 55.563053 28.71595224' fill='%23F5F7F9'/%3E%3Cpath d='M47.61737265 33.33401165c-2.23048096-.81542989-4.33095203-.76972886-4.68227753.10192277l-18.4732863 45.83265753c-.35119594.87158312 1.17777319 2.2438 3.40825405 3.05922986l76.1894997 27.85372267c2.23048064.81542987 4.33082856.770036 4.68211206-.10151349l18.4732863-45.83265753c.35123715-.87168544-1.17760753-2.24420922-3.40808914-3.05963936L47.61737265 33.33401165z' fill='%23B8CAE0'/%3E%3Cpath d='M49.7213361 27.7692761c-.2451422 0-.4436963.1595442-.4436963.3565234v77.3337695c0 .196979.1985541.356523.4436963.356523h64.7315199c.245142 0 .443696-.159544.443696-.356523V28.1257995c0-.1969792-.198554-.3565234-.443696-.3565234H49.7213361z' fill-opacity='.1' fill='%23000'/%3E%3Cpath d='M110.060163 25.4220034H46.7411171c-1.8536928 0-3.3618065 1.1465982-3.3618065 2.5560137v74.1090869c0 1.40925 1.5081137 2.555352 3.3618065 2.555352h63.3190459c1.853693 0 3.361807-1.146102 3.361807-2.555352V27.9780171c0-1.4094155-1.508114-2.5560137-3.361807-2.5560137' fill='%23DCE4EF'/%3E%3Cpath d='M48.2168417 28.9429124c-.2286158 0-.4137842.1475485-.4137842.3297172v71.5192c0 .1821684.1851684.3297174.4137842.3297174h60.3675973c.228615 0 .413784-.147549.413784-.3297174v-71.5192c0-.1821687-.185169-.3297172-.413784-.3297172H48.2168417z' fill='%23F5F7F9'/%3E%3Cpath d='M67.6725866 24.3054189h22.3444825c1.4378236 0 2.6036208.8661167 2.6036208 1.9345053v4.8590131c0 .2563606-.2798371.4642812-.624869.4642812H65.6938348c-.345136 0-.624869-.2079206-.624869-.4642812v-4.8590131c0-1.0683886 1.165589-1.9345053 2.6036208-1.9345053' fill='%23B8CAE0'/%3E%3Cpath d='M84.4137934 24.3054189c0 2.4667254-2.4933723 4.4663382-5.5690706 4.4663382-3.0755932 0-5.5688605-1.9996128-5.5688605-4.4663382 0-2.4666413 2.4932673-4.4663383 5.5688605-4.4663383 3.0756983 0 5.5690706 1.999697 5.5690706 4.4663383' fill='%23B8CAE0'/%3E%3Cpath d='M99.4642999 75.6683088H68.4630403c-.5794991 0-1.0492469-.3932729-1.0492469-.8784297v-2.1511865c0-.4851567.4697478-.8784297 1.0492469-.8784297h31.3152993c.5794994 0 1.0492464.393273 1.0492464.8784297v1.8883604c0 .6277258-.6133893 1.1412558-1.3632861 1.1412558M99.4642999 59.4778327H68.4630403c-.5794991 0-1.0492469-.393273-1.0492469-.8784298v-2.1511865c0-.4851567.4697478-.8784297 1.0492469-.8784297h31.3152993c.5794994 0 1.0492464.393273 1.0492464.8784297v1.8883604c0 .6277258-.6133893 1.1412559-1.3632861 1.1412559M99.4642999 91.858785H68.4630403c-.5794991 0-1.0492469-.3932729-1.0492469-.8784297v-2.1511865c0-.4851568.4697478-.8784297 1.0492469-.8784297h31.3152993c.5794994 0 1.0492464.3932729 1.0492464.8784297v1.8882725c0 .6277259-.6133893 1.1413437-1.3632861 1.1413437M53.8384758 85.7175699v6.6995074h7.2184067l.001194-.0000852-.001194-6.6994222h-7.2184067zm7.1061472 8.3743843h-6.9926938c-.9812246 0-1.7795151-.7602767-1.7795151-1.6947764v-6.6597084c0-.9344996.7982905-1.6947763 1.7795151-1.6947763h6.9926938c.9812247 0 1.7795152.7602767 1.7795152 1.6947763v6.6597084c0 .9344997-.7982905 1.6947764-1.7795152 1.6947764zM53.8384758 76.7848934h7.2196007v-6.6647273c-.0403278-.0147475-.1205242-.0347801-.2581349-.0347801h-6.9614658v6.6995074zm7.1187818 1.6748769h-7.017785c-.9743735 0-1.7670585-.7549382-1.7670585-1.6828282v-6.6836048c0-.8650138.7311138-1.6828281 1.5044021-1.6828281h7.017785c.5631275 0 1.053295.1520214 1.4177397.439625.3946075.3113304.6117973.7529044.6117973 1.2432031v6.6836048c0 .92789-.792596 1.6828282-1.7668806 1.6828282zM53.8384758 61.1527095h7.2196007v-6.6647273c-.0403278-.0147475-.1205242-.0347801-.2581349-.0347801h-6.9614658v6.6995074zm7.1187818 1.6748768h-7.017785c-.9743735 0-1.7670585-.7549381-1.7670585-1.6828281v-6.6836048c0-.8650138.7311138-1.6828281 1.5044021-1.6828281h7.017785c.5631275 0 1.053295.1520214 1.4177397.439625.3946075.3113304.6117973.7529043.6117973 1.2432031v6.6836048c0 .92789-.792596 1.6828281-1.7668806 1.6828281z' fill='%2394B0D5'/%3E%3Cpath d='M86.8550292 38.2627259c-.0996146 0-.2212173.1241598-.2229087.1259052-.0102375.0110546-.020831.0216436-.0316916.0317673-.2413361.2262104-.3729092.4897736-.414126.8295548-.1011279.8354893.3772713 1.9135964.5528209 2.2253339l.0786946.1371925.0757569-.1318397c.0686353-.1310252.9513682-1.8732183.0444216-3.1733468-.0225224-.032349-.0516323-.0445672-.0829677-.0445672m2.0010077 7.816092c-.2537408 0-.5042636-.1056607-.6681403-.3062628l-1.1361722-1.3902144-1.1361722 1.3902144c-.2765047.338311-.7993608.4066732-1.1679941.1531314-.3686332-.2537606-.443361-.7337182-.1667371-1.0719199l1.4280516-1.7475574-.4017662-.4917706c-.1395633-.1739135-1.3162578-1.6952741-1.048811-3.2446357.1229969-.712608.5412103-1.3246961 1.2098274-1.7712929.6110516-.4457218 1.8091989-.7807514 2.6774476.0929727 1.7176664 1.7287441.7926866 3.9658846.0635246 4.9070958-.0041714.0053596-.0083428.0106099-.0126334.0158601l-.4018853.4917706 1.4280515 1.7475574c.2766239.3383111.2018961.8181593-.1667371 1.0719199-.1501707.1032543-.3257273.1531314-.4998538.1531314M69.8550292 38.2627259c-.0996146 0-.2212173.1241598-.2229087.1259052-.0102375.0110546-.020831.0216436-.0316916.0317673-.2413361.2262104-.3729092.4897736-.414126.8295548-.1011279.8354893.3772713 1.9135964.5528209 2.2253339l.0786946.1371925.0757569-.1318397c.0686353-.1310252.9513682-1.8732183.0444216-3.1733468-.0225224-.032349-.0516323-.0445672-.0829677-.0445672m2.0010077 7.816092c-.2537408 0-.5042636-.1056607-.6681403-.3062628l-1.1361722-1.3902144-1.1361722 1.3902144c-.2765047.338311-.7993608.4066732-1.1679941.1531314-.3686332-.2537606-.443361-.7337182-.1667371-1.0719199l1.4280516-1.7475574-.4017662-.4917706c-.1395633-.1739135-1.3162578-1.6952741-1.048811-3.2446357.1229969-.712608.5412103-1.3246961 1.2098274-1.7712929.6110516-.4457218 1.8091989-.7807514 2.6774476.0929727 1.7176664 1.7287441.7926866 3.9658846.0635246 4.9070958-.0041714.0053596-.0083428.0106099-.0126334.0158601l-.4018853.4917706 1.4280515 1.7475574c.2766239.3383111.2018961.8181593-.1667371 1.0719199-.1501707.1032543-.3257273.1531314-.4998538.1531314M76.7931037 40.3475237v2.8674044c0 .2551379.088976.4966925.2323722.6307206.0145879-.0160529.0327969-.0387551.0543167-.0703861l1.4719318-2.162783-1.4719318-2.162783c-.0215198-.031631-.0397288-.0542381-.0543167-.0703861-.1433962.1342181-.2323722.3756777-.2323722.6307207v.3374925zm-.0136521 4.6147096c-.3739218 0-.7466637-.1479829-1.0708152-.4409852-.4284118-.3870689-.6741534-.9613152-.6741534-1.5752339V39.720599c0-.6139187.2457416-1.1880694.674368-1.5753295.5966016-.5394493 1.3583896-.5871518 1.988243-.1246575.1531728.1124211.2872527.2520872.4098553.4267414l1.1378551 1.6231276 1.4364777-2.0487218c.2196764-.3134599.6828418-.4087693 1.03456-.2128927.3517182.1958766.4586603.6086609.2389839.9221208l-1.8245584 2.6023193 1.8245584 2.6024149c.2196764.3133643.1127343.7262442-.2389839.9221208-.351611.1958766-.8147763.1004716-1.03456-.2129883l-1.4364777-2.0487218-1.1378551 1.623032c-.1226026.1748454-.2567897.3145114-.4101771.4270281-.2874671.2112676-.6028229.316041-.9173206.316041z' fill='%23DCE4EF'/%3E%3Cpath d='M138.791947 97.6658832c-.055258.1209424-.181121.1991018-.320288.1991018-.138143 0-.264007-.0782568-.320288-.1992967l-4.055275-8.7997554c-.107444-.2318469-.162702-.4823079-.161692-.7354976l.016386-48.5168194 9.083692.0029237-.017395 48.5168194c0 .2531897-.056281.5036507-.162703.7354001l-4.062437 8.7971241' fill='%2394B0D5'/%3E%3Cpath d='M140.006586 35.4722393l-3.025851-.0009748c-1.672046-.0005845-3.028921 1.2903126-3.028921 2.8831273l-.001023 1.9554471 9.082669.0029236.001024-1.955447c.001023-1.5928147-1.354829-2.884589-3.027898-2.8850762M140.638975 93.6615291l-1.847028 4.0043541c-.055257.1209424-.181121.1991018-.320288.1991018-.138143-.0000974-.264007-.0782568-.320288-.1992967l-1.843958-4.0055235 4.331562.0013643' fill='%237DA3C4'/%3E%3C/g%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: 130% 130%;
                background-size: auto 120px;
            }

            @media screen and (min-width: 480px) {
                background-position: 88% 50%;
            }
        }
    }

    &__card-title {
        font-size: $font-size-s;
        color: $color-darkgray-200;
        margin-bottom: 12px;
    }

    &__card-text {
        font-size: $font-size-xs;
        line-height: 22px;
        color: $color-darkgray-200;
        letter-spacing: 0.1px;
        margin: 14px 0 20px;
    }

    &__card-button {
        padding: 9px 24px;
        font-weight: $font-weight-semi-bold;
        border-radius: $border-radius-default;
        border: 1px solid $color-gray-300;
        background-color: $color-gray-50;
        display: inline-flex;
        align-items: center;

        &:link,
        &:visited,
        &:active,
        &:hover,
        &:focus {
            color: $color-darkgray-300 !important;
            text-decoration: none;
            font-size: $font-size-xs;
        }

        .mt-icon {
            margin-left: 6px;
        }
    }

    &__card-list {
        list-style: none;
        margin-bottom: 32px;
        font-size: $font-size-xs;
    }

    &__card-list-item {
        margin-bottom: 12px;
    }

    /* increase width smart-bar head-area on dashboard index */
    &.sw-page {
        .sw-page__head-area {
            /* stylelint-disable-next-line max-line-length */
            grid-template-columns: [head-start back-btn-start] 1fr [back-btn-end header-content-start] minmax(0, $content-max-width) [header-content-end] 1fr [smart-bar-end];
        }

        .smart-bar__content {
            max-width: $content-max-width;
        }

        .sw-search-bar__container {
            max-width: $content-max-width;
        }
    }

    .sw-card {
        max-width: $content-max-width !important;
    }

    .sw-dashboard__before-content {
        margin-top: 32px;
    }
}
